<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>做预习</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/pre-learn.css"/>
</head>
<body>
<div id="wrap">
    <div class="wordArea">
        <h3 class="vocabulary">重点词汇</h3>
        <ul class="voc_ul">
            <li class="voc_li" v-for="item in vocabularyList">
                <p class="voc_p">
                    <span class="voc_word">{{item.word}} </span>
                    <span class="voc_lea"> {{item.phonetic}}</span>
                </p>
                <div class="voc_pdiv">
                    <p class="voc_explain" v-html="item.partOfSpeech"></p>
                </div>
                <div class="playImg" :class="item.word" @click="PlayFun(item.word)"></div>
            </li>
        </ul>
        <!--<audio id='music' src=""></audio>-->
    </div>
    <div class="sentenceArea">
        <h3 class="sentenceTitle">重点句型</h3>
        <ul class="sentenceUl">
            <li class="sentenceLi" v-for="item in sentencePatternsList">
                <p class="sentenceEn">
                    {{item.id}}.{{item.contentEn}}
                </p>
                <p class="sentenceCn">
                    {{item.contentCn}}
                </p>
            </li>
        </ul>
    </div>
    <div class="btnDiv" @click="do_exercise_question()">
        <span>做练习</span>
    </div>
    <div class="guide" v-if="guideShow">
        <img src="./img/previewMP3@3x.png" alt="" @click="saveGuideFn('preview-play')">
    </div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var url = location.search;
    //    var audio=document.getElementById('audio')
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest); //此时的theRequest就是我们需要的参数；
    }
    ;
    //百度语音接口
    //    http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字
    //    lan=zh中文,lan=en英文,ie=UTF-8文字格式,spd=2语速,1-9数值越大语速越快,text=你要转换的文字
    var vm = new Vue({
        el: '#wrap',
        data: {
            audio_url: '',
            isPlay: false,
            vocabularyList: '',
            sentencePatternsList: '',
            partOfSpeech: '',
            cuid: '',
            myToken: '',
            per: 0,
            vol: 7,
            spd: 4,
            guideShow: false,
        },
        created: function () {
            this.$http.post(URL + '/tpo/baidu/api/yuyin/token/', {}).then(function (res) {
                console.log(res.data)
                this.cuid = res.data.data.cuid;
                this.myToken = res.data.data.token;
            }, function (res) {
                console.log(res.data.data);

            });
            this.searchGuideFn('preview-play')
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/prepare/' + theRequest.id, {}).then(function (res) {
                    console.log(res.data.data);
                    this.vocabularyList = res.data.data.vocabularyList;
                    this.sentencePatternsList = res.data.data.sentencePatternsList;
                    //单词解释的数据处理
                    for (var i = 0; i < this.vocabularyList.length; i++) {
                        this.vocabularyList[i].partOfSpeech = this.vocabularyList[i].partOfSpeech + '<br>';
                        var patt = new RegExp("\\[");
                        if (!patt.test(this.vocabularyList[i].phonetic)) {
                            this.vocabularyList[i].phonetic = '[' + this.vocabularyList[i].phonetic + ']'
                        }
//console.log(sign)
                    }

                }, function () {
                    console.log(res.data.data);

                })
            },
            PlayFun: function (text) {
                console.log(text)
                /*  #spd    选填    语速，取值0-9，默认为5中语速
                    #pit    选填    音调，取值0-9，默认为5中语调
                    #vol    选填    音量，取值0-15，默认为5中音量
                    #per    选填    发音人选择, 0为普通女声，1为普通男生，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女声
                    */

                var audio = document.createElement("audio");
                audio.src = "http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=" + this.cuid + "&tok=" + this.myToken + "&tex=" + text + "&vol=" + this.vol + "&per=" + this.per + "&spd=" + this.spd;
                console.log(audio)
//                audio.autoplay = true;
                audio.play();
                var horn2 = setTimeout(function () {
                    $('.' + text).css({backgroundImage: 'url("./img/horn2.png")'})
                    clearTimeout(horn2)
                }, 300)
                var horn3 = setTimeout(function () {
                    $('.' + text).css({backgroundImage: 'url("./img/horn3.png")'})
                    clearTimeout(horn3)
                }, 600)
                var horn1 = setTimeout(function () {
                    $('.' + text).css({backgroundImage: 'url("./img/horn1.png")'})
                    clearTimeout(horn1)
                }, 900)


            },
            //跳转做习题
            do_exercise_question: function () {
                window.location.href = 'do_exercise.html?id=' + theRequest.id;
            },

            //新手引导数据查询
            searchGuideFn: function (data) {
                this.$http.post(URL + '/tpo/operation-guide/search/' + data, {}).then(function (res) {
                    console.log(res);
                    if (res.data.data == 0) {
                            this.guideShow = true;
                    }
                }, function (res) {

                })
            },
            //新手引导后台传值
            saveGuideFn: function (data) {
                this.guideShow=false;
                this.$http.post(URL + '/tpo/operation-guide/save/' + data, {
                    'article-index': data,
                }).then(function (res) {
                }, function (res) {
                })
            },

        }
    })
    vm.HttpDataFun();


</script>